<script setup lang="ts">
	import { router } from "@/router";

	// title 用于 header 显示的文案
	// share 为是否可以分享当前页
	// onBack 为返回操作的方法，因为在不同页面有时需要返回的地方不同，这里做为可配置的
	defineProps({
		title: {
			type: String
		},
		share: {
			type: Boolean,
			value: false
		},
		onBack: {
			type: Function,
			default() {
				router.back()
			}
		}
	});
	
	const { safeAreaInsets } = uni.getSystemInfoSync();
</script>

<template>
	<!-- 安全距离 -->
	<view :style="`height: ${safeAreaInsets?.top}rpx`"></view>

	<view class="flex flex-justify-between flex-items-center p-30">

		 <!-- 添加插槽 与 参数变成通用可控组件！！！ -->
		<!-- <view class="left-container">
			<uni-icons type="arrow-left" size="24"></uni-icons>
		</view> -->
		<view class="left-container">
			<slot name="left">
				<uni-icons type="arrow-left" size="24" @click="onBack && onBack()"></uni-icons>
			</slot>
		</view>

		<view class="center-container text-30">{{ title }}</view>

		<view class="right-container">
			<view class="right-wrapper flex flex-items-center">
				<slot name="right"></slot>
				<uni-icons v-if="share" class="ml-40" type="redo-filled" size="24"></uni-icons>
			</view>
		</view>

	</view>
</template>

<style scoped lang="scss">
	.center-container {
		position: absolute;
		right: 50%;
		transform: translateX(50%);
	}
</style>